<template>
    <el-row class="my-menu">

      <el-col class="menu-list">
        <h1>菜单列表</h1>
        <el-button-group>
          <el-button type="primary">添加</el-button>
          <el-button type="primary">编辑</el-button>
          <el-button type="primary">删除</el-button>
        </el-button-group>
        <el-tree :data="menuList" @node-click="menuTreeClick"></el-tree>
      </el-col>

      <!-- 菜单属性框 -->
      <el-col  class="menu-attribute">
        <h2>菜单属性</h2>
        <router-view :school="school"></router-view>
      </el-col>

    </el-row>
</template>
<script>
import { menuList } from "./menu-list"
import axios from 'axios'
export default {
  name: "my-menu",
  components: {},
  data () {
    return {
      // 点击时node节点样式实列
      clickNodeStyle: {},
      school: '',
      menuList
    }
  },
  created () {
    axios.get('/mymenu/score-sys-child').then(res => {
      // console.log('-====res.data====, score-sys-child', res.data)
      // console.log('this.menuTree', this.menuTree)
      this.menuList[1].children = res.data
      // this.menuList[1].url = this.menuList[1].children[0].children[0].url
      // this.school = this.menuList[1].children[0].label + ' ' + this.menuList[1].children[0].children[0].label
    })
  },
  methods: {
    menuTreeClick (obj, node, VueComponent) {
      // console.log('arguments', arguments)
      if (obj.url) {
        this.$router.push(obj.url)
      }
      if (node.isLeaf) {  // 是否是叶子节点
        this.school = node.parent.label + ' ' + node.label
      }
      // 节点点击有背景颜色
      this.clickNodeStyle.background = ''  // 上一次的节点的背景颜色清除
      this.clickNodeStyle = VueComponent.$el.children[0].style
      this.clickNodeStyle.background = '#f5f7fa'
    }
  }
}
</script>

<style scoped>
h1, h2{
  color: #424242;
  margin: 10px;
}
.menu-attribute {
  width: calc(100% - 230px);
  padding: 10px;
  height: 100%;
  border: 1px dotted #ccc;
}
.menu-list {
  width: 230px;
}
</style>
